<!DOCTYPE html>
<html>
<<template "_head.html">>

<el-main style="background-color: #F5F5F5;">
		    	<el-row :gutter="20" style="margin-bottom: 8px;">
				  <el-col :span="24"><div class="grid-content host_table">
				  		<el-link href="/host" style="font-size: 18px;margin-bottom: 12px;"> > 服务器列表</el-link>
				  		<template>
						  <el-table
						    :data="tableData"
						    :row-class-name="tableRowClassName"
						    height="84%"
						    border
						    stripe
						    style="width: 100%">
						    <el-table-column prop="host_name" label="计算机Name"></el-table-column>
						    <el-table-column prop="host_ip" label="TCP通讯地址"></el-table-column>
						    <el-table-column prop="os_name" label="系统"></el-table-column>
							<el-table-column prop="sys_architecture" label="架构"></el-table-column>
							<el-table-column prop="cpu_name" label="CPU"></el-table-column>
							<el-table-column prop="cpu_core_number" label="cpu核心数"></el-table-column>
							<el-table-column prop="mem_totle" label="内存大小"></el-table-column>
							<el-table-column prop="disk_totle" label="磁盘大小"></el-table-column>
							<el-table-column prop="slve_version" label="客户端版本"></el-table-column>
							<el-table-column prop="last_conn_time" label="上次连接时间"></el-table-column>
							<el-table-column prop="online" label="是否在线" :formatter="IsOnline"></el-table-column>
						    <!--cpu  mem  -->
						     <el-table-column fixed="right" label="操作" width="88">
						      <template slot-scope="scope">
						        <el-button @click="handleClick(scope.row)" type="text" size="small">管理</el-button>
						        <el-button @click="dockerClick(scope.row)" type="text" size="small">docker</el-button>
								<el-badge is-dot class="item" >
									<el-button type="text" size="small" @click="dialogAlert = true">通知</el-button>
								</el-badge>

						      </template>
						    </el-table-column>
						  </el-table>
						</template>
				  </div></el-col>
				</el-row>

		    </el-main>
		</el-container>

<el-dialog
		title="监控设置"
		:visible.sync="dialogVisible"
		width="60%"
		>
	<div class="block">
    	<span class="demonstration">磁盘使用率报警：</span>
    	<el-slider v-model="value2"></el-slider>
  	</div>
 	<el-button @click="dialogVisible = false">取 消</el-button>
 	<el-button type="primary" @click="dialogVisible = false">提交设置</el-button>
  </span>
</el-dialog>

<el-dialog
		title="通知&警报"
		:visible.sync="dialogAlert"
		width="60%"
>
	<template>
		<el-alert
				title="不可关闭的 alert"
				type="success"
				:closable="false"
				style="margin: 8px;"
				effect="dark"
				show-icon
				description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"
		 ></el-alert>
		<el-alert
				title="自定义 close-text"
				type="info"
				close-text="知道了"
				style="margin: 8px;"
				effect="dark"
				show-icon
		></el-alert>
		<el-alert
				title="设置了回调的 alert"
				type="warning"
				@close="hello"
				style="margin: 8px;"
				effect="dark"
				show-icon
		></el-alert>
			<el-alert
					title="设置了回调的 alert"
					type="error"
					@close="hello"
					style="margin: 8px;"
					effect="dark"
					show-icon
			></el-alert>
	</template>

	</span>
</el-dialog>

	</div>
</body>

<script type="text/javascript">
let url = window.location.pathname;
new Vue({
	el:"#app",
	data:function(){
		return {
			menu:Enum(url),
			tableData: [],
			dialogVisible: false,
			dialogAlert: false,
			value2: 50
		}
	},
	methods:{
		handleSelect(key, keyPath) {
        	console.log(key, keyPath);
      	},
      	handleOpen(key, keyPath) {
	        console.log(key, keyPath);
	        window.location.href=keyPath;
	    },
	    handleClose(key, keyPath) {
	        console.log(key, keyPath);
	    },
		tableRowClassName({row, rowIndex}) {
			if (row.type === 1) {
			  return 'warning-row';
			} else if (row.type === 3) {
			  return 'success-row';
			}
			return '';
      	},
      	handleClick(row) {
        	console.log(row);
        	console.log("/slve/details/"+row.uuid);
			window.location = "/slve/details/"+row.uuid;
		},
		dockerClick(row) {
        	console.log(row);
        	console.log("/slve/docker/"+row.uuid);
			window.location = "/slve/docker/"+row.uuid;
		},
		getlist: function(){
			let _this = this;
			$.ajax({
				type:'get',
				url:'/api/slve/v1/list',
				dataType:'json',
				contentType: "application/json",
				async:false,
				success:function (json){
					console.log(json);
					_this.tableData = json.slves;
				},
				error:function (){
					//弹错误框
					console.log("请求失败");
				}
			});
		},

		//监控设置
		monitorPopup: function (){
			$('#blk').show();
			let htmlStr = $('#blk').html();
			this.$alert(htmlStr, '监控设置', {
				dangerouslyUseHTMLString: true
			});
		},
		hello: function (){
			alert('Hello World!');
		},

		IsOnline: function(row) {
			return row.online===true?"在线":"离线";
		}
	},
	mounted:function(){
		this.getlist();
	}
})
</script>

</html>